<template>
  <div class="search-popup">
    <md-popup v-model="isPopupShow" position="right">
      <div class="content">
        <div class="content-hd">搜索</div>
        <md-field>
          <md-input-item title="客户名称" placeholder="请输入" v-model="form.customerName"/>
          <md-input-item title="客户编号" placeholder="请输入" v-model="form.customerCode" type="digit"/>
        </md-field>
        <div class="content-ft">
          <md-button @click="reset">重置</md-button>
          <md-button type="primary" @click="search">搜索</md-button>
        </div>
      </div>
    </md-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  Field,
  Selector,
  InputItem,
  FieldItem,
  Button,
  Popup,
  PopupTitleBar
} from 'mand-mobile';

export default {
  name: 'dx-search-visit',
  components: {
    [Field.name]: Field,
    [Selector.name]: Selector,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  props: {
    defaultName: {
      type: String,
      default: ''
    },
    defaultCode: {
      type: String,
      default: ''
    }
  },
  created() {
    this.form.customerName = this.defaultName;
    this.form.customerCode = this.defaultCode;
  },
  data() {
    return {
      isPopupShow: false,
      isAreaSelectorShow: false,
      isLevelSelectorShow: false,
      isServiceLevelSelectorShow: false,
      customerLevel: '',
      customerServiceLevel: '',
      form: {
        customerName: '',
        customerCode: ''
      }
    };
  },
  methods: {
    showPopup() {
      this.isPopupShow = true;
    },
    reset() {
      this.form = {
        customerName: '',
        customerCode: ''
      };
    },
    search() {
      this.isPopupShow = false;
      this.$emit('on-search', this.form);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .search-popup
    /deep/ .md-slide-left
      width : 80%
    ::v-deep.md-field-item.is-solid
      .md-field-item-title
        width : 200px
    .content
      position : relative
      height : 100%
      background : #fff
      .content-hd
        height : 88px
        line-height : 88px
        font-size : 32px
        text-align : center
      .content-ft
        position : absolute
        bottom : 0
        padding : 20px
        display : flex
        width : 100%
        .md-button
          margin-right : 20px
          &:last-of-type
            margin-right : 0
    .md-field
      padding : 0 20px
</style>
